<template>
  <div>
    <mt-header fixed title="图文分享">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="content">
      <ul>
        <li v-for="(item, index) in categoryList" :key="item.id"
            @click="clickTab(index)"
            :class="{active:index==currentTab}">
          <p>{{item.title}}</p>
        </li>
      </ul>
      <div>
        <div v-for="item in photos" :key="item.id" class="item-image"
        @click="clickItem(item)">
          <img :src="item.imgSrc" class="image"/>
          <p class="text">
            <span>{{item.title}}</span>
            <br>
            <span>{{item.desc}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "photos",
    data() {
      return{
        categoryList:[
          {id:0, title:'家居生活'},
          {id:1, title:'家居生活'},
          {id:2, title:'家居生活'},
          {id:3, title:'家居生活'},
          {id:4, title:'家居生活'},
          {id:5, title:'家居生活'},
          {id:6, title:'家居生活'},
          {id:7, title:'家居生活'}
        ],
        currentTab:0,
        photos: [
          {id:0,title:"DOTA2：为什么现在的职业选手取得不了yyf，pis等人的那种成绩呢",desc:'在足球和篮球等体育项目上我们常常用黄金一代来形容某些明星球员所创造的辉煌，其实在DOTA2上也一样，毕竟电子竞技也是国家承认的体育项目之一，毫无疑问yyf，09，pis，zsmj等人所在的那个dota1年代是中国刀塔的黄金一代，那么问题来了，为什么现在大环境变好了，选手们的成绩反而不如之前了呢？',imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392299983&di=64440d526baf6fa56d859df76aa5a3b6&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121203%2F7447430_220239116000_2.jpg'},
          {id:1,title:"DOTA2：为什么现在的职业选手取得不了yyf，pis等人的那种成绩呢",desc:'在足球和篮球等体育项目上我们常常用黄金一代来形容某些明星球员所创造的辉煌，其实在DOTA2上也一样，毕竟电子竞技也是国家承认的体育项目之一，毫无疑问yyf，09，pis，zsmj等人所在的那个dota1年代是中国刀塔的黄金一代，那么问题来了，为什么现在大环境变好了，选手们的成绩反而不如之前了呢？',imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392299983&di=64440d526baf6fa56d859df76aa5a3b6&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121203%2F7447430_220239116000_2.jpg'},
          {id:2,title:"DOTA2：为什么现在的职业选手取得不了yyf，pis等人的那种成绩呢",desc:'在足球和篮球等体育项目上我们常常用黄金一代来形容某些明星球员所创造的辉煌，其实在DOTA2上也一样，毕竟电子竞技也是国家承认的体育项目之一，毫无疑问yyf，09，pis，zsmj等人所在的那个dota1年代是中国刀塔的黄金一代，那么问题来了，为什么现在大环境变好了，选手们的成绩反而不如之前了呢？',imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392299983&di=64440d526baf6fa56d859df76aa5a3b6&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121203%2F7447430_220239116000_2.jpg'},
          {id:3,title:"DOTA2：为什么现在的职业选手取得不了yyf，pis等人的那种成绩呢",desc:'在足球和篮球等体育项目上我们常常用黄金一代来形容某些明星球员所创造的辉煌，其实在DOTA2上也一样，毕竟电子竞技也是国家承认的体育项目之一，毫无疑问yyf，09，pis，zsmj等人所在的那个dota1年代是中国刀塔的黄金一代，那么问题来了，为什么现在大环境变好了，选手们的成绩反而不如之前了呢？',imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392299983&di=64440d526baf6fa56d859df76aa5a3b6&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121203%2F7447430_220239116000_2.jpg'},
          {id:4,title:"DOTA2：为什么现在的职业选手取得不了yyf，pis等人的那种成绩呢",desc:'在足球和篮球等体育项目上我们常常用黄金一代来形容某些明星球员所创造的辉煌，其实在DOTA2上也一样，毕竟电子竞技也是国家承认的体育项目之一，毫无疑问yyf，09，pis，zsmj等人所在的那个dota1年代是中国刀塔的黄金一代，那么问题来了，为什么现在大环境变好了，选手们的成绩反而不如之前了呢？',imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392299983&di=64440d526baf6fa56d859df76aa5a3b6&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121203%2F7447430_220239116000_2.jpg'},
          {id:5,title:"DOTA2：为什么现在的职业选手取得不了yyf，pis等人的那种成绩呢",desc:'在足球和篮球等体育项目上我们常常用黄金一代来形容某些明星球员所创造的辉煌，其实在DOTA2上也一样，毕竟电子竞技也是国家承认的体育项目之一，毫无疑问yyf，09，pis，zsmj等人所在的那个dota1年代是中国刀塔的黄金一代，那么问题来了，为什么现在大环境变好了，选手们的成绩反而不如之前了呢？',imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392299983&di=64440d526baf6fa56d859df76aa5a3b6&imgtype=0&src=http%3A%2F%2Fpic25.nipic.com%2F20121203%2F7447430_220239116000_2.jpg'}
        ]
      }
    },
    created() {
      this.currentTab = this.$route.params.categoryId
    },
    methods:{
      clickTab(index) {
        this.currentTab = index;
        this.$router.push({name:'photos',params:{'categoryId':index}})
      },
      clickItem(item) {
        this.$router.push({name:'photodetail',query:{id:item.id}})
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm=> {
        console.log(to.params.categoryId)
      })
    },
    beforeRouteUpdate(to, from, next) {
      next()
    }
  }
</script>

<style scoped>
  .content{
    padding-top: 41px;
  }
  .content ul {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 40px;
  }
  .content ul::-webkit-scrollbar {
    display: none;
  }
  .content ul li {
    display: inline-block;
    width: 25%;
    height: 100%;
    text-align: center;
  }
  .content ul .active {
    background-color: aqua;
  }
  .content ul li p {
    height: 40px;
    line-height: 40px;
  }
  .item-image {
    position: relative;
  }
  .image {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
  }
  .text {
    background-color: #00000050;
    color: white;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 10px;
  }
</style>
